<template>
	<view>
		<view class="supply_msg">
			<custom-card>
				<view class="supply_header">
					<view class="supply_type">
						<text>{{supply.cookbookName?supply.cookbookName:supply.mealTimesName}}</text>
					</view>
					<view class="supply_result appling">
						<text>{{supply.startMealTime + '-' +supply.endMealTime}}</text>
					</view>
				</view>
				<view class="supply_description">
					商家名称：{{supply.merchantName}}
				</view>
				<view v-if="supply.deviceList" class="supply_menus">
					<view class="menu_item" v-for="(menu, inx) in supply.deviceList" :key="inx">
						<text>{{menu.name}}</text>
						<text>{{menu.units}}</text>
					</view>
				</view>
				<view v-else class="supply_menus">
					<view class="menu_item">
						预定餐次
						<text> {{ supply.reservationDate?supply.reservationDate:''}}</text>
						<text> {{ supply.cookbookName?supply.cookbookName:supply.mealTimesName}}</text>
					</view>
				</view>
				<view class="supply_price">
					<view>
						每份<text class="hint">{{supply.deductionAmount}}</text>元定金，<text class="hint">{{supply.minQuantity}}</text>份起订，最多<text
						 class="hint">{{supply.maxQuantity}}</text>份
					</view>
				</view>
				<view class="quantity">
					<view class="amount_number">
						<view>预约数量</view>
						<view class="number_box" v-if="supply.canDo">
							<view class="num_handle_box cut" @click="numHandle(-1)">-</view>
							<view class="quantity_box ">{{quantity}}</view>
							<view class="num_handle_box add" @click="numHandle(1)">+</view>
						</view>
						<view class="number_box" v-else>
							<view class="quantity_box ">{{quantity}}份</view>
						</view>
					</view>
					<view class="amount_money">
						<view>预约定金</view>
						<view><text class="amount">{{Number(quantity*supply.deductionAmount).toFixed(2)}}</text>元</view>
					</view>
				</view>
				<view class="m_hint" v-if="supply.canDo">
					<view>特别提醒：</view>
					<view>1.预约超出下订时间未完成扣款确认，则视为没有预约。一旦预约成功，若有变动请尽快修改，若超出下订时间，则不允许修改预约。</view>
					<view>2.预约定金作为预约的保障，若在预约的日期餐时超过用餐时间没有用餐，定金不予退还。</view>
					<view>3.预约定金不是实际的用餐金额，用餐时根据实际的点菜情况，需要进行最终的结算扣款。</view>
				</view>
			</custom-card>
		</view>
		<view class="confirm_box" v-if="supply.canDo">
			<view class="confirm_btn cancel" @click="_cancelMeal">放弃预约</view>
			<view class="confirm_btn confirm" @click="_confirmMeal">确定预约</view>
		</view>
		<mc-modal :isShow="showMcModal" :content="content"
        @ok="ok" @cancel="showMcModal = false" :title="title"></mc-modal>
	</view>
</template>

<script>
	let _this = this
	import {
		confirmMealOrder,
		cancelMealOrder,
		mealOrderPay
	} from '../../common/api/index.js';
	import {
		_showLoading,
		_showToast,
		dateFtt
	} from '../../common/js/util.js'
	import mcModal from '../../components/custom-modal/mc-modal.vue'
	export default {
		data() {
			return {
				supply: {},
				quantity: 1,
				showMcModal: false,
				title: '',
				content: '',
			};
		},
		components:{
			mcModal
		},
		onLoad(option) {
			_this = this
			this.supply = { ...JSON.parse(decodeURIComponent(option.supply))}
			this.quantity = parseInt(this.supply.quantity?this.supply.quantity:1)
		},
		mounted() {

		},
		methods: {
			ok: ()=>{},
			numHandle(e) {
				if(_this.quantity + e < 1) return
				_this.quantity += e
			},
			
			_confirmMeal(){
				if(this.quantity < _this.supply.minQuantity){
					_this.showMcModal = true;
					_this.title = '提示';
					_this.content = `当前餐次最低${_this.supply.minQuantity}份起订`;
					_this.ok = ()=>{_this.showMcModal = false}
					return;
				}
				if(this.quantity > _this.supply.maxQuantity){
					_this.showMcModal = true;
					_this.title = '提示';
					_this.content = `当前餐次最多预定${_this.supply.maxQuantity}份`;
					_this.ok = ()=>{_this.showMcModal = false}
					return;
				}
				confirmMealOrder({
					orgId: _this.supply.orgId,
					orderNo: _this.supply.orderNo,
					quantity: this.quantity
				}).then(res => {
					if (res.resultCode == 0) {
						_this.showMcModal = true,
						_this.title = '授权支付确认',
						_this.content = '订餐成功后，系统将扣除订餐金额，请授权确认。',
						_this.ok = _this._orderPay
					} else {
						_showToast(res.resultMsg)
					}
				}).catch(err => {
					console.log(err)
				})
			},
			_cancelMeal(){
				cancelMealOrder({
					orgId: _this.supply.orgId,
					orderNo: _this.supply.orderNo,
					closeType: 10
				}).then(res => {
					if (res.resultCode == 0) {
						// uni.reLaunch({
						// 	url: './meal?current=2'
						// })
						uni.navigateBack({
							delta: getCurrentPages().length < 4?1:2
						})
					} else {
						_showToast(res.resultMsg)
					}
				}).catch(err => {
					console.log(err)
				})
			},
			_orderPay(){
				mealOrderPay({
					orderNo: _this.supply.orderNo,
					orgId: _this.supply.orgId,
				}).then(res => {
					if(res.resultCode == 0) {
						// uni.reLaunch({
						// 	url: './meal?current=2'
						// })
						uni.navigateBack({
							delta: getCurrentPages().length < 4?1:2
						})
					} else {
						if(res.resultCode == 51) {
							let that = this
							_showToast(`${res.resultMsg},请去充值`)
						} else {
							_showToast(`扣款失败，失败原因：${res.resultMsg}`)
						}
					}
				}).catch(err => {
					console.log(err)
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100vh;
		background-color: #f6f6f6;
		font-family: PingFang-SC-Heavy, PingFang-SC;
	}

	.supply_msg {
		padding: 24rpx;
		height: calc(100vh - 100rpx);
		box-sizing: border-box;
		overflow-y: auto;
	}

	.supply_header {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		position: relative;

		&::before {
			content: "";
			display: block;
			position: absolute;
			width: 10rpx;
			height: 10rpx;
			border-radius: 50%;
			background-color: #185AFF;
			left: -16rpx;
		}

		.supply_type {
			font-size: 32rpx;
			font-weight: 600;
			color: #3C424F;
			line-height: 44rpx;
		}

		.supply_result {
			display: flex;
			flex-direction: row;
			align-items: center;
			font-size: 28rpx;
			font-weight: 500;
			color: #FA6400;
			line-height: 40rpx;
		}

		.result_icon {
			width: 36rpx;
			height: 36rpx;
			margin-right: 12rpx;
		}

		.supply_result.agree {
			color: #55C976;
		}

		.supply_result.not_agree {
			color: #E02020;
		}

		.supply_result.appling {
			color: #FA6400;
		}
	}

	.supply_description {
		font-size: 32rpx;
		font-weight: 600;
		color: #6B707A;
		line-height: 40rpx;
		padding: 20rpx 0 10rpx 0;
	}

	.supply_menus {
		padding: 20rpx 0;

		.menu_item {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			line-height: 48rpx;
			font-size: 28rpx;
			color: #999;
		}
	}

	.supply_price {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 10rpx 0;
		font-size: 22rpx;
		font-weight: 500;
		color: #9AA2B2;
		line-height: 34rpx;

		.hint {
			font-size: 30rpx;
			color: #FA6400;
		}
	}

	.m_hint {
		margin-top: 48rpx;
		font-size: 28rpx;
		color: #666;
	}

	.confirm_box {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;

		.confirm_btn {
			text-align: center;
			line-height: 100rpx;
			flex: 1;

			&.confirm {
				background-color: #007AFF;
				color: #FFF;
			}

			&.cancel {
				background-color: #FF3333;
				color: #FFF;
			}
		}
	}

	.quantity {
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-direction: column;
		margin: 36rpx 0;

		.number_box {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			margin: 36rpx 0;

			.num_handle_box {
				width: 100rpx;
				height: 100rpx;
				margin: 0 12rpx;
				border-radius: 50rpx;
				color: rgba(0, 0, 0, 0.4);
				background-color: #ccd0d4;
				font-weight: 700;
				font-size: 64rpx;
				text-align: center;
				line-height: 90rpx;
				transition: all 0.038s cubic-bezier(0.23, 1, 0.32, 1);
				box-shadow: 1px 1px 6px 0 rgba(0, 0, 0, 0.5), inset 0 -3px 4px -1px rgba(0, 0, 0, 0.2), 0 -10px 15px -1px rgba(255, 255, 255, 0.6), inset 0 3px 4px -1px rgba(255, 255, 255, 0.2), inset 0 0 5px 1px rgba(255, 255, 255, 0.8), inset 0 20px 30px 0 rgba(255, 255, 255, 0.2);
				text-shadow: 1px 1px 3px #ccd0d4, 0 0 0 rgba(0, 0, 0, 0.8), 1px 1px 4px white;
				&:active{
					box-shadow: 1px 1px 6px 0 rgba(0, 0, 0, 0.4), inset 0 -8px 30px 1px rgba(255, 255, 255, 0.9), 0 -10px 15px -1px rgba(255, 255, 255, 0.6), inset 0 8px 25px 0 rgba(0, 0, 0, 0.4), inset 0 0 10px 1px rgba(255, 255, 255, 0.6);
				}
			}
			.quantity_box{
				text-align: center;
				width: 100rpx;
				font-size: 48rpx;
				color: #666;
			}
		}
		.amount_money,.amount_number{
			font-size: 32rpx;
			color: #666;
			font-weight: 700;
			text-align: center;
			.amount{
				font-size: 84rpx;
				color: #FA6400;
			}
		}
	}
</style>
